<template>
  <transition-group 
    class="toast-container"
    name="toast"
    tag="div"
  >
    <div
      v-for="toast in toasts"
      :key="toast.id"
      class="toast"
      :class="toast.type"
    >
      <i :class="getIcon(toast.type)"></i>
      <span>{{ toast.message }}</span>
    </div>
  </transition-group>
</template>

<script>
export default {
  name: 'Toast',
  data() {
    return {
      toasts: []
    }
  },
  methods: {
    getIcon(type) {
      const icons = {
        success: 'fas fa-check-circle',
        error: 'fas fa-times-circle',
        warning: 'fas fa-exclamation-circle',
        info: 'fas fa-info-circle'
      }
      return icons[type] || icons.info
    },
    show(message, type = 'info') {
      const id = Date.now()
      this.toasts.push({ id, message, type })
      setTimeout(() => {
        this.toasts = this.toasts.filter(toast => toast.id !== id)
      }, 3000)
    }
  }
}
</script>

<style lang="scss" scoped>
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.toast {
  position: relative;
  z-index: 2000;
  padding: $spacing-sm $spacing-lg;
  border-radius: $border-radius-md;
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: $shadow-lg;
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  min-width: 100px;
  max-width: 400px;
  border: 1px solid var(--border-color);
  font-size: 14px;
  transition: all 0.3s ease;
  
  &.toast-enter,
  &.toast-leave-to {
    opacity: 0;
    transform: translateY(-20px);
  }
  
  &.toast-enter-to,
  &.toast-leave {
    opacity: 1;
    transform: translateY(0);
  }

  i {
    font-size: 1.2em;
  }

  &.success {
    border-left: 4px solid #10b981;
    i { color: #10b981; }
  }

  &.error {
    border-left: 4px solid #ef4444;
    i { color: #ef4444; }
  }

  &.warning {
    border-left: 4px solid #f59e0b;
    i { color: #f59e0b; }
  }

  &.info {
    border-left: 4px solid #3b82f6;
    i { color: #3b82f6; }
  }
}

.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter,
.toast-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style> 